<template>
  <rk-dialog width="800"
    height="340"
    title="修改用户密码"
    :visible="visible"
    :destroyOnClose="true"
    @close="visible = false"
    :maskClosable="false">
    <el-form ref="pwdRef"
      class="rk-compact-form"
      :model="form"
      :rules="rules">
      <el-row class="mb20"
        justify="center">
        <el-col :span="18">
          <el-form-item label="用户名"
            label-width="120">
            <el-input v-model="row.name"
              disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20"
        justify="center">
        <el-col :span="18">
          <el-form-item label="旧密码"
            prop="password"
            label-width="120">
            <el-input v-model="form.password"
              placeholder="请输入旧密码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20"
        justify="center">
        <el-col :span="18">
          <el-form-item label="新密码"
            prop="newPassword"
            label-width="120">
            <el-input v-model="form.newPassword"
              placeholder="请输入新密码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20"
        justify="center">
        <el-col :span="18">
          <el-form-item label="再次输入新密码"
            prop="againPassword"
            label-width="120">
            <el-input v-model="form.againPassword"
              placeholder="请再次输入新密码" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary"
        @click="handleConfirm">保存
      </el-button>
      <el-button @click="visible=false">取消</el-button>
    </template>
  </rk-dialog>
</template>

<script setup name="ModifyUserPersonPwd">

import { reactive, ref } from "vue";
import { useUserApi } from "@/api/index.js";
import { ElMessage } from "element-plus";

const { modifyUserPersonPassword } = useUserApi();
const form = reactive({
  newPassword: void 0,
  againPassword: void 0,
  password: void 0,
  userId: ""
})
const pwdRef = ref(null)
const visible = ref(false)
const row = ref({})

const validateOldPass = (rule, value, callback) => {
  if (value === '' || value === 0 || value === undefined) {
    callback(new Error('请输入旧密码'))
  } else {
    if (form.newPassword !== '') {
      if (!pwdRef.value) return
      pwdRef.value.validateField('newPassword', () => null)
    }
    callback()
  }
}
const validatePass = (rule, value, callback) => {
  if (value === '' || value === 0 || value === undefined) {
    callback(new Error('请输入新密码'))
  } else if (value === form.password) {
    callback(new Error("新密码和旧密码不能一致"))
  } else {
    if (form.againPassword !== '') {
      if (!pwdRef.value) return
      pwdRef.value.validateField('againPassword', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '' || value === 0 || value === undefined) {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.newPassword) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}

const rules = {
  password: [{ validator: validateOldPass, trigger: 'blur' }],
  newPassword: [{ validator: validatePass, trigger: 'blur' }],
  againPassword: [{ validator: validatePass2, trigger: 'blur' }],
}

const handleOpen = (val) => {
  form.againPassword = void 0
  form.newPassword = void 0
  form.password = void 0
  row.value = val
  form.userId = val.userId
  visible.value = true
}

const handleConfirm = () => {
  pwdRef.value.validate(valid => {
    if (valid) {
      const params = {
        newPassword: form.newPassword,
        password: form.password,
        userId: form.userId
      }
      modifyUserPersonPassword(params).then(resp => {
        if (resp.code === 200) {
          ElMessage.success({ message: "修改密码成功" })
          visible.value = false
        } else {
          const { msg } = resp;
          ElMessage.error({ message: msg ?? "修改密码失败" })
        }
      })
    } else {
      return false;
    }
  });
}
defineExpose({
  handleOpen
})

</script>

<style scoped lang="scss">
</style>
